<template>
	<view class="select-special-work-personnel">
		<navBar title="选择特殊工种作业人员"  @goBack="uni.navigateBack()"></navBar>
		
		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
			<view style="height: 100%;">
				<view class="search">
					<u-search @search="confirmSearch" @change="confirmSearch" v-model="searchForm.keyWord" placeholder="请输入关键字" :showAction="false" clearabled height="88upx" />
				</view>
				<checkbox-group>
					<view class="special-work-personnel-list">
						<view v-for="(item, index) in specialWorkPersonnelArray" :key="index">
							<view class="list-item">
								<view style="display: flex; align-items: center;" class="wid-320">
									<view style="max-width: 65%; box-sizing: border-box; padding-right: 18upx;">{{item.name}} {{item.phone}}</view>
									<view class="tag" style="max-width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{item.specialTypeStr}}</view>
								</view>
								<checkbox @click="changeCheckBox(item)" :checked="currentSpecialWorkPersonnelArray.includes(item.id.toString())" :value="item.id.toString() || ''" activeBackgroundColor="#2979ff" class="checkbox"></checkbox>
							</view>
						</view>
					</view>
				</checkbox-group>
		
				<view class="footer-button">
					<view class="button-placeholder"></view>
					
					<view class="button-group">
						<view @click="clickCancelBtn" class="button-error">取消</view>
						<view @click="clickConfirmBtn" class="button-primary">确定</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
 	import { mapGetters } from "vuex";
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { getSafetySupervisorList } from "@/api/engineeringMaintenance/engineeringMaintenance.js";
	import { standardDataList } from "@/api/comprehensive/comprehensive.js";
	
	export default {
		name: "select-special-work-personnel",
		data() {
			return {
				// 当前页面的类型 - 0: 综合大修下的  1: 工程维保下的
				type: 0,
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 特殊工种作业人员列表
				specialWorkPersonnelArray: [],
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				// 是否正在加载中
				isLoading: false,
				// 当前特殊工种作业人员列表
				currentSpecialWorkPersonnelArray: [],
				// 标准数据id列表
				standardDataIds: [],
				// 项目id
				projectId: 0,
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		async onLoad(options) {
			this.type = parseInt(options.type);
			this.projectId = parseInt(options.projectId);
			this.initContainerData();
			await this.getStandardList();
			this.specialWorkPersonnelArray = await this.getSpecialWorkPersonnelArray();
			
			// 判断是否回显
			if(uni.getStorageSync("_temp_select_special_work_personnel")) {
				this.currentSpecialWorkPersonnelArray = uni.getStorageSync("_temp_select_special_work_personnel").map(item => item.id.toString());
				this.tempSpecialWorkPersonnelArray = uni.getStorageSync("_temp_select_special_work_personnel")
				uni.removeStorageSync("_temp_select_special_work_personnel");
			}
		},
		methods: {
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight;
			},
			
			/** 获取标准数据 */
			getStandardList() {
				return new Promise(resolve => {
					standardDataList({
						currPage: 1,
						pageSize: 99999,
						params: { 
							type: "engineering_structure",
						},
					}).then(res => {
						const { list } = res.result;
						
						this.standardDataIds = [list.filter(item => item.treeLevel === 1).find(item => item.code === (this.type === 1 ? "gcwb" : "zhzzdx")).id];
						resolve();
					});
				});
			},
			
			/** 获取特殊工种作业人员 */
			getSpecialWorkPersonnelArray() {
				return new Promise(resolve => {
					const { pageNum, pageSize } = this.paging;
					
					let data = {};
					
					if(this.type === 0) {
						data.orgId = this.projectId;
					}
					else if(this.type === 1) {
						data.projectOrgId = this.projectId;
					}
					
					getSafetySupervisorList({
						currPage: pageNum,
						pageSize,
						params: {
							projectId: uni.getStorageSync("isOwner"),
							standardDataIds: this.standardDataIds,
							jobTypeCodes: this.dictMap['gwgz_special_jobs'].map(item => item.code),
							name: this.searchForm.keyWord,
							...data,
						},
					}).then(res => {
						const { list, total } = res.result;
						this.paging.total = total;
						resolve(list.map(item => {
							let tempArray = [];
							
							if(item.specialType) {
								for(const item1 of item.specialType) {
									const temp = this.dictMap["gwgz_special_jobs"].find(item2 => item2.code === item1);
									if(temp) {
										tempArray.push(temp.name);
									}
								}
							}
							
							return {
								...item,
								specialTypeStr: tempArray.join(","),
							}
						}));
					});
				});
			},
					
			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if(!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.specialWorkPersonnelArray = this.specialWorkPersonnelArray.concat(await this.getSpecialWorkPersonnelArray());
					this.isLoading = false;
				}
			},
			
			/** 点击确认按钮 */
			async clickConfirmBtn() {
				if (Array.isArray(this.tempSpecialWorkPersonnelArray)) {
					uni.setStorageSync("_temp_select_special_work_personnel", this.currentSpecialWorkPersonnelArray.map(item => this.tempSpecialWorkPersonnelArray.find(item1 => Number(item) === Number(item1.id))));
				}
				uni.navigateBack();
			},
			
			/** 点击无按钮 */
			clickCancelBtn() {
				uni.setStorageSync("_temp_select_special_work_personnel", []);
				uni.navigateBack();
			},
			
			/** 确认搜索 */
			async confirmSearch() {
				this.paging.pageNum = 1;
				this.specialWorkPersonnelArray = await this.getSpecialWorkPersonnelArray();
			},
			
			/** 改变复选框 */
			changeCheckBox(data) {
				const index = this.currentSpecialWorkPersonnelArray.findIndex(item => Number(item) === Number(data.id))
				if (index !== -1) {
					this.currentSpecialWorkPersonnelArray.splice(index, 1)
				} else {
					this.currentSpecialWorkPersonnelArray.push(data.id.toString())
				}
				// 记录
				if (!this.tempSpecialWorkPersonnelArray) {
					this.tempSpecialWorkPersonnelArray = [data]
				}
				else if (!this.tempSpecialWorkPersonnelArray.find(item => Number(item.id) === Number(data.id))) {
					this.tempSpecialWorkPersonnelArray.push(data)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-special-work-personnel {
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
				padding-top: 200rpx;
		/* #endif */
		.search {
			padding: 40upx 18upx 34upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
			z-index: 1;
		}
		
		.u-checkbox-group {
			display: block;
		}
		
		.checkbox {
			::v-deep .uni-checkbox-input {
				border-radius: 50%;
			}
		}
		
		.special-work-personnel-list {
			padding: 0 36upx 0 28upx;
			color: #445469;
			font-weight: 500;
			
			.list-item {
				/* #ifdef APP-PLUS || H5 */
					padding: 40upx 18upx 34upx 28upx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				padding: 42upx 36upx 14upx 28upx;
				/* #endif */
				border-bottom: 1px solid #e2e5ed;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.wid-320 {
					/* #ifdef APP-PLUS || H5 */
						width: calc(100% - 44upx);
					/* #endif */

					/* #ifdef MP-WEIXIN */
						width: 640rpx;
					/* #endif */
				}
				.tag {
					color: #fff;
					font-weight: bold;
					font-size: 28upx;
					background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
					border-radius: 4upx;
					padding: 0 6upx;
					line-height: 40upx;
				}
			}
			    
			::v-deep .u-radio-group {
				flex: initial;
				.u-radio__icon-wrap {
					margin-right: 0;
				}
			}
		}
	}
	
	.footer-button {
		height: 154upx;
		
		.button-placeholder {
			height: 100%;
		}
		
		.button-group {
			height: 154upx; 
			padding: 30upx 0; 
			box-sizing: border-box; 
			background: #fff; 
			position: fixed; 
			width: 100vw; 
			bottom: 0; 
			z-index: 1;
			display: flex;
			text-align: center;
			color: #fff; 
			font-weight: bold; 
			line-height: 92upx; 
			
			.button-primary {
				background: #2f80ed; 
				flex: 1;
			}
			.button-error {
				background: #ff6a6a;
				flex: 1;
			}
		}
	}
</style>
